<template>
  <div class="container">
    <el-tooltip
      v-if="(role[0] as any).path.indexOf('status') != -1 && (role[0] as any).has_role"
      :content="props.enable ? '停用' : '启用'"
      placement="bottom"
    >
      <svgBtn
        :icon="!props.enable ? 'table_status_enable' : 'table_status_disable'"
        style="font-size: 20px"
        color="#45474A"
        @click.stop="$emit('edit_item_status')"
      ></svgBtn>
    </el-tooltip>
    <el-tooltip
      v-if="(role[0] as any).path.indexOf('pass') != -1 && (role[0] as any).has_role"
      content="审核"
      placement="bottom"
    >
      <svgBtn
        icon="table_exam"
        style="font-size: 20px"
        @click.stop="$emit('edit_item_status')"
      ></svgBtn>
    </el-tooltip>
    <el-tooltip
      v-if="role[1] && (role[1] as any).has_role"
      content="编辑"
      placement="bottom"
    >
      <svgBtn
        icon="table_edit"
        style="font-size: 20px"
        @click.stop="$emit('edit_item')"
      ></svgBtn>
    </el-tooltip>
    <el-tooltip
      v-if="role[2] && (role[2] as any).has_role"
      content="删除"
      placement="bottom"
    >
      <svgBtn
        icon="table_delete"
        style="font-size: 20px"
        @click.stop="$emit('delete_item')"
      ></svgBtn>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import svgBtn from '@/components/svg_button.vue'
const props = defineProps({
  role: {
    type: Array,
    default: [],
  },
  enable: {
    type: Boolean,
    default: false,
  },
})
// console.log(props.role)
</script>

<style lang="scss" scoped>
.container {
  //   width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
}
</style>
